import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu,Button,message, Popconfirm } from 'antd';
import { Outlet,NavLink,useNavigate } from 'react-router-dom';
import React from 'react';
const { Header, Content, Footer, Sider } = Layout;
const items1 = ['模板', '样式', '展示'].map((key) => ({
  key,
  label: `${key}`,
}));


function Home  ()  {
  const history=useNavigate();
  const confirm = () => {
    message.success('退出成功');
    history('/login')
  };
  
  // const cancel = (e) => {
  //   console.log(e);
  //   message.error('返回');
  // };


 return(
  <Layout style={{height:'100vh'}}>
          
  <Header className="header">
  <Popconfirm
    title="确定退出登录吗"
    onConfirm={confirm}
    // onCancel={cancel}
    okText="确定"
    cancelText="取消"
  >
    <span style={{ float: 'right',color:'blue',cursor:'pointer'}}>退出登录</span>
  </Popconfirm>
  {/* <Button type="primary" style={{ float: 'right',marginTop:'15px'}}onClick={logOut}  >退出登录</Button> */}
    <div className="logo" />
    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />

  </Header>
  <Content
    style={{
      padding: '0 50px',
    }}
  >
  
    <Layout
      className="site-layout-background"
      style={{
        padding: '24px 0',
      }}
    >
      
      <Sider className="site-layout-background" width={200}>
        <Menu
          mode="inline"
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          style={{
            height: '100%',
          }}
          items={[
          {
            key:'1',
            icon:<UserOutlined/>,
            label: <NavLink to='/home/users'>用户列表</NavLink> 
          }
           ,
           {
            key:'2',
            icon:<LaptopOutlined/>,
            label: <NavLink to='/home/roles'>角色列表</NavLink>
          }
          ,
           {
            key:'3',
            icon:<NotificationOutlined/>,
            label: <NavLink to='/home/goods'>商品列表</NavLink>
          }

          ]}
        />
      </Sider>
      <Content
        style={{
          padding: '0 24px',
          minHeight: 280,
        }}
      >
       {/* <Tables/> */}
       {/**
        * 
        */}

       <Outlet></Outlet>
      </Content>
    </Layout>
  </Content>
  <Footer
    style={{
      textAlign: 'center',
    }}
  >
    Ant Design ©2022 Created by Ant UED
  </Footer>
</Layout>
 )
 
  };

export default Home;